<template>
  <div class="judge">
    <div class="search">
      <!-- <el-select v-model="grade" placeholder="请选择班级">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select> -->
    </div>
    <div class="table">
      <el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange" border
        style="width: 100%">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column fixed prop="studentName" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="studentId" label="学号" width="150">
        </el-table-column>
        <el-table-column prop="evaluateInfo" label="班主任评语">
          <template slot-scope="scope">
            <span v-if="!scope.row.isShow">{{ scope.row.evaluateInfo }}</span>
            <div v-else>
              <el-input type="textarea" :rows="3" placeholder="请输入评价内容" v-model="scope.row.evaluateInfo"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.isShow" @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button v-if="scope.row.isShow" @click="handleClick(scope.row)" type="text" size="small">保存</el-button>
            <el-button v-if="scope.row.isShow" @click="cancelClick(scope.row)" type="text" size="small">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <div class="group">
      <el-button v-if="!editFlag" type="primary" @click="batchEdit">批量修改</el-button>
      <el-button v-if="editFlag" type="primary" @click="batchSave">批量保存</el-button>
    </div>
  </div>
</template>

<script>
import { teachClasses, postEvaluate, classStudentQuery } from '@/api/api'
export default {
  data() {
    return {
      grade: "",
      options: [],
      tableData: [],
      formData: {
        userId: "T001",
      },
      editFlag: false,
      teachersInfo: [],
      originalData: [],
      multipleSelection: [],
      page: 1,
      pageSize: 5,
      total: 0,
    };
  },
  created() {
    this.getTeachClasses()
  },
  mounted() {
    this.originalData = JSON.parse(JSON.stringify(this.tableData));
  },
  methods: {
    init_list(data) {
      for (let i in data) {
        data[i].isShow = false;
      }
      return data;
    },
    async getTeachClasses() {
      const res = await teachClasses(this.formData)
      this.teachersInfo = res.data;
      this.classStudentQuery()
      console.log(res)
    },
    async classStudentQuery() {
      let data = {
        queryType: "E",
        page: this.page,
        count: this.pageSize,
        classId: this.teachersInfo[0].classId,
        userId: this.formData.userId,
        classGrade: this.teachersInfo[0].classGrade,
        subjectName: this.teachersInfo[0].subjectName
      }
      this.tableData = [];
      const res = await classStudentQuery(data);
      this.tableData = this.init_list(res.data.objects);
      console.log(this.tableData, 44444)
      this.total = res.data.total;
    },
    async submitEvaluate(data) {
      let postList = [];

      for (let i in data) {
        if (data[i].isShow) {
          let row = {
            studentId: data[i].studentId,
            studentName: data[i].studentName,
            className: data[i].className,
            classGrade: data[i].classGrade,
            evaluateInfo: data[i].evaluateInfo,
            evaluator: data[i].evaluator
          }
          postList.push(row);
        }
      }
      if (!postList) {
        this.$message({
          message: '提交数据不能为空',
          type: 'success'
        })
        return;
      }

      const res = await postEvaluate(postList);
      console.log(res)

      // 保存数据后立即调用 classStudentQuery 方法
      this.classStudentQuery();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.classStudentQuery();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.classStudentQuery();
    },
    editClick(row) {
      row.isShow = true;
    },
    handleClick(row) {
      let data = []
      data.push(row);
      this.submitEvaluate(data)
      // 模拟保存到数据库
      console.log("保存数据:", row.evaluateInfo);
      row.isShow = false;
    },
    cancelClick(row) {
      row.evaluateInfo = this.originalData.find(item => item.studentId === row.studentId).evaluateInfo;
      row.isShow = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    batchEdit() {
      this.editFlag = true;
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach(row => {
          row.isShow = true;
        });
      } else {
        this.tableData.forEach(row => {
          row.isShow = true;
        });
      }
    },
    batchSave() {
      this.submitEvaluate(this.tableData)
      this.editFlag = false;
    }
  },
};
</script>
<style lang="less" scoped>
.judge {
  margin: 10px;
}

.group {
  text-align: right;
}

.search {
  padding-bottom: 10px;
}

.pagination {
  margin: 10px 0;
}
</style>
